<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<c:set var="basePath" value="<%=request.getContextPath()%>"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>异构数据同步编辑</title>
<style>.CodeMirror {border: 1px solid #ccc;}</style>


<jsp:include page="../common/common_head.jsp"/>

</head>
<body>
<div class="container-fluid" style="padding-top: 10px;">
    <div class="panel panel-primary">
        <%--<div class="panel panel-default">--%>
        <div class="panel-heading">
            <h3 class="panel-title">模板信息</h3>
        </div>
        <div style="margin-left: 10px;margin-top: 10px;">
   <div class="panel-body" style="padding-bottom: 0px;">     
	<form:form  id="template_form" action="${basePath}/sync/saveSyncTemplate.do" class="form-horizontal" commandName="syncTemplate" method="post">
	<input type="hidden" name="testSourceId" />
	<input type="hidden" name="testFieldOne" />
	<input type="hidden" name="testFieldTwo" />
	<input type="hidden" name="testFieldThree" />
	
 		<input type="hidden" name="templateId" id="templateId3"/>	

			<div class="row">
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="templateName">模板名</label>
                            <div class="col-sm-10">
                                <form:input  path="templateName"  class="form-control" />
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="userName">用户名</label>
                            <div class="col-sm-10">
                                <form:input  path="userName" class="form-control" />
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="tableName">表名</label>
                            <div class="col-sm-10">
                                <form:input  path ="tableName" class="form-control" />
                            </div>
                        </div>
                    </div>

                   
                </div>
                
                <div class="row">
                
                 <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="status">状态</label>
                            <div class="col-sm-10">
                                <form:select class="form-control"  path="status"  items="${statusMap}">
                                </form:select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="dataSourceId">数据源</label>
                            <div class="col-sm-10">
				                  <form:select class="form-control" path="dataSourceId" items="${dsMap}" >
				                  </form:select>              
                            </div>
                            </div>
                        </div>
                 </div>

                  
                    
                
                <div class="row">
                 	<div class="col-xs-4">
                        <div class="form-group">
                             <label class="col-sm-2 control-label " for="dataSourceId">描述</label>
                            <div class="col-sm-2 btn-group" role="group">
								<form:textarea path="description" style="width: 485px;height: 100px;"></form:textarea>     
							 </div>  
                        </div>
                    </div>
                    

                <div class="col-xs-1">
                        <div class="form-group" style="margin-top:20px;">
                            <label class="col-sm-8 control-label " for="queue"></label>
                            <div class="col-sm-2 btn-group" role="group">
			   	                 <a href="${basePath}/sync/findSyncTriggerList.do?templateId=${templateId}" class="btn btn-primary" >队列管理</a>
                            </div>
                        </div>
                    </div>
                    
			   
                 <div class="col-xs-1">
                        <div class="form-group" style="margin-top:20px;">
                            <label class="col-sm-7 control-label " for="save"></label>
                            <div class="col-sm-2 btn-group" role="group">                           
                                <a href="javascript:void(0)" onclick="saveTemplate()" class="btn btn-primary" >保存</a>
                            </div>
                        </div>
                    </div>
                    
                     <div class="col-xs-1">
                        <div class="form-group" style="margin-top:20px;">
                            <label class="col-sm-5 control-label " for="back"></label>
                            <div class="col-sm-2 btn-group" role="group">
                                <a href="${basePath}/sync/syncTemplateList.do?templateId=${templateId}&templateName=${templateName}&userName=${userName}&tableName=${tableName}&dataSourceId=${dataSourceId}&status=${status}&sqlContent=${sqlContent}&currentPage=${currentPage}&showCount=${showCount}" class="btn btn-primary" >返回列表</a>	
                            </div>
                        </div>
                    </div>
                </div>
                    
</form:form>
</div>
</div>
<script type="text/javascript">
var editor;
	var message = '${message}';
	if (message != '') {
		alert(message);
	}
</script>
<br/>
<c:if test="${syncTemplate.templateId != null}">



<form class="form-horizontal" role="form">
               <div class="row">
                    <div class="col-xs-3">
                        <div class="input-group">
            				<span class="input-group-addon">源表主键值(测试用):</span>
                            <input id="testSourceId" type="text" class="form-control" value="${testSourceId }" style="width:192px;" />                               
                       </div>
                    </div>

                    <div class="col-xs-3">
                         <div class="input-group">
            			  <span class="input-group-addon" style="width:151px;">备用字段1:</span>
                          <input id="testFieldOne" type="text" class="form-control" value="${testFieldOne }" />                               
                       </div>
                    </div>

                    <div class="col-xs-3">
                         <div class="input-group">
            			  <span class="input-group-addon" style="width:151px;">备用字段2:</span>
                          <input id="testFieldTwo" type="text" class="form-control" value="${testFieldTwo }" />                               
                       </div>
                    </div>

                   <div class="col-xs-3">
                         <div class="input-group">
            			  <span class="input-group-addon" style="width:151px;">备用字段2:</span>
                          <input id="testFieldThree" type="text" class="form-control" value="${testFieldThree }" />                               
                       </div>
                    </div>
                </div>

    </form>            

<br/>
<div class="row">
      <div class="col-xs-4">
      <div class="form-group">
                     <label class="col-sm-5 control-label " for="initCount">未同步数据:<span id="initCount">0</span>条  </label>                    
      </div>
    </div>
</div>                      

 <table class="table table-hover" id="SCRIPT_SOURCE_TABLE" >
 	<thead>
		<tr>
			<td align="center" colspan="2" style="font-size: 15px;font-weight:bold;" >源脚本</td>
			<td align="right" ><a href="javascript:openDialog('INSERT', 'SOURCE')">＋增加</a></td>
		</tr>
	</thead>
	<tbody>
		<tr class="info">
			<td align="center" >SQL说明</td>
			<td align="center" colspan="2">操作</td>
			
		</tr>
		<c:forEach items="${sourceSqls}" var="iss" varStatus="st">
		
		<tr class="data_tr" sqlId="${iss.templateSqlId }" sqlDesc="${iss.description }">
			<td align="center" style="word-wrap:break-word:" >
					<c:if test="${iss.match == 'true' }">
				    <font color="red">${iss.desc }</font>
				    </c:if>
				    <c:if test="${iss.match == '' || null==iss.match  }">
				     ${iss.desc }
				    </c:if>
			</td>
			<td align="center" colspan="2">
				<a href="javascript:openDialog('INSERT', 'SOURCE', ${iss.templateSqlId })">编辑</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a style="cursor:pointer;" onclick="deleteSql(${iss.templateSqlId }, this)">删除</a>
			</td>
		</tr>
		</c:forEach>
	</tbody>
 </table>
 
 <table class="table table-hover">
 	<thead>
		<tr>
			<td align="center" colspan="4" style="font-size: 15px;font-weight:bold;" >INSERT触发 (<a style="cursor:pointer;" onclick="batchTestTargetSql(this)">一键测试</a>)</td>
			<td align="right"><a href="javascript:openDialog('INSERT', 'TARGET')">＋增加</a></td>
			
		</tr>
	</thead>
	<tbody>
		<tr class="info">
			<td align="center" >SQL说明</td>
			<td align="center">执行顺序</td>
			<td align="center">操作</td>
			<td align="center" colspan="2">测试结果</td>
			
		</tr>
		<c:forEach items="${insertTargetSqls}" var="iss" varStatus="st">
		<tr>
			<td align="center" style="word-wrap:break-word:" >
				    <c:if test="${iss.match == 'true' }">
				    <font color="red">${iss.desc }</font>
				    </c:if>
				    <c:if test="${iss.match == '' || null==iss.match  }">
				     ${iss.desc }
				    </c:if>	
			</td>
			<td align="center">
				<a  href="javascript:void(0)"  onclick="resort('up',${syncTemplate.templateId},${iss.templateSqlId })" >↑</a>
				&nbsp;&nbsp;
				<a  href="javascript:void(0)"  onclick="resort('down',${syncTemplate.templateId},${iss.templateSqlId })">↓</a>
			</td>
			<td align="center" >
				<a href="javascript:openDialog('INSERT', 'TARGET', ${iss.templateSqlId })">编辑</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a style="cursor:pointer;" name='testSql' id="${iss.templateSqlId }" onclick="testTargetSql(${iss.templateSqlId }, this)">测试</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a style="cursor:pointer;" onclick="deleteSql(${iss.templateSqlId }, this)">删除</a>
			</td>
			<td colspan="2" align="center" style="color: #359E42;"></td>
		</tr>
		</c:forEach>
	</tbody>
 </table>
 
 
  <table class="table table-hover">
 	<thead>
		<tr>
			<td align="center" colspan="4" style="font-size: 15px;font-weight:bold;" >UPDATE触发 (<a style="cursor:pointer;" onclick="batchTestTargetSql(this)">一键测试</a>)</td>
			<td align="right" ><a href="javascript:openDialog('UPDATE', 'TARGET')">＋增加</a></td>
		</tr>
	</thead>
	<tbody>
		<tr class="info">
			<td align="center" >SQL说明</td>
			<td align="center">执行顺序</td>
			<td align="center">操作</td>
			<td align="center" colspan="2">测试结果</td>
			
		</tr>
		<c:forEach items="${updateTargetSqls}" var="iss" varStatus="st">
		<tr>
			<td align="center" style="word-wrap:break-word:" >
					<c:if test="${iss.match == 'true' }">
				    <font color="red">${iss.desc }</font>
				    </c:if>
				    <c:if test="${iss.match == '' || null==iss.match  }">
				     ${iss.desc }
				    </c:if>
			</td>
			<td align="center">
				<a  href="javascript:void(0)"  onclick="resort('up',${syncTemplate.templateId},${iss.templateSqlId })">↑</a>
				&nbsp;&nbsp;
				<a  href="javascript:void(0)"  onclick="resort('down',${syncTemplate.templateId},${iss.templateSqlId })">↓</a>
			</td>
			<td align="center" >
				<a href="javascript:openDialog('UPDATE', 'TARGET', ${iss.templateSqlId })">编辑</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a style="cursor:pointer;" name='testSql' id="${iss.templateSqlId }" onclick="testTargetSql(${iss.templateSqlId }, this)">测试</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a style="cursor:pointer;" onclick="deleteSql(${iss.templateSqlId }, this)">删除</a>
			</td>
			<td colspan="2" align="center" style="color: #359E42;"></td>
		</tr>
		</c:forEach>
	</tbody>
 </table>
 
 <table class="table table-hover">
 	<thead>
		<tr>
			<td align="center" colspan="4" style="font-size: 15px;font-weight:bold;" >DELETE触发 (<a style="cursor:pointer;" onclick="batchTestTargetSql(this)">一键测试</a>)</td>
			<td align="right"><a href="javascript:openDialog('DELETE', 'TARGET')">＋增加</a></td>
			
		</tr>
	</thead>
	<tbody>
		<tr class="info">
			<td align="center" >SQL说明</td>
			<td align="center">执行顺序</td>
			<td align="center">操作</td>
			<td align="center" colspan="2" >测试结果</td>
			
		</tr>
		<c:forEach items="${deleteTargetSqls}" var="iss" varStatus="st">
		
		<tr>
			<td align="center" style="word-wrap:break-word:" >
					<c:if test="${iss.match == 'true' }">
				    <font color="red">${iss.desc }</font>
				    </c:if>
				    <c:if test="${iss.match == '' || null==iss.match  }">
				     ${iss.desc }
				    </c:if>
			</td>
			<td align="center">
				<a  href="javascript:void(0)"  onclick="resort('up',${syncTemplate.templateId},${iss.templateSqlId })">↑</a>
				&nbsp;&nbsp;
				<a  href="javascript:void(0)"  onclick="resort('down',${syncTemplate.templateId},${iss.templateSqlId })">↓</a>
			</td>
			<td align="center" >
				<a href="javascript:openDialog('DELETE', 'TARGET', ${iss.templateSqlId })">编辑</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a style="cursor:pointer;" name='testSql' id="${iss.templateSqlId }"  onclick="testTargetSql(${iss.templateSqlId }, this)">测试</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a style="cursor:pointer;" onclick="deleteSql(${iss.templateSqlId }, this)">删除</a>
			</td>
			<td colspan="2" align="center" style="color: #359E42;"></td>
		</tr>
		</c:forEach>
	</tbody>
 </table>
 
</div>


<br />
<br />
<br />
<br />
<br />
<br />

<div id="mask_div" style="z-index: 9998; width:100%; left:0; top:0; border:1px solid #333; position: absolute; display: none;background-color: white;"></div>

</c:if>
      </div>
      
      
      <!-- 模态框（Modal） -->
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label" aria-hidden="true">
    <div class="modal-dialog" style="width:60%;height:60%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模板SQL信息</h4>
            </div>
            <div class="modal-body">
				<form action="${basePath}/sync/saveSyncTemplateSql.do" method="post" id="template_sql_form" class="form-horizontal" role="form">
		<input type="hidden" name="testSourceId" />
		<input type="hidden" name="testFieldOne" />
		<input type="hidden" name="testFieldTwo" />
		<input type="hidden" name="testFieldThree" />
				
		<input type="hidden" name="templateSqlId" value=""/>
 		<input type="hidden" id="templateId" name="templateId" value=""/>
 		<input type="hidden" name="triggerType" value=""/>
		<input type="hidden" name="sqlType" value=""/>
						
				  <div class="form-group">
				    <label for="description" class="col-sm-2 control-label">SQL描述</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" name="description" value="" />
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="scriptType" class="col-sm-2 control-label">脚本类型：</label>
				    <div class="col-sm-10">
				      <select name="scriptType" class="form-control" >
				                   <c:forEach items="${scriptMap}" var="entry">
				                  		<option value="${entry.key}">${entry.value}</option>
				                  </c:forEach>
				            </select>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label for="dataSourceId" class="col-sm-2 control-label">数据源</label>
				    <div class="col-sm-10">
				      <select name="dataSourceId" class="form-control">
				                   <c:forEach items="${dsMap}" var="entry">
				                  		<option value="${entry.key}">${entry.value}</option>
				                  </c:forEach>
				            </select>
				    </div>
				  </div>
				  <div class="form-group" id="sourceSqlIdDiv">
				    <label for="sourceSqlId" class="col-sm-2 control-label">源SQL</label>
				    <div class="col-sm-10">
				      <select name="sourceSqlId" class="form-control" >
							<option value="">请选择</option>
						</select>
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="sqlContent" class="col-sm-2 control-label">脚本内容</label>
				    <div class="col-sm-10">
				      <textarea name="sqlContent" id="sqlContent" class="form-control"></textarea>
				    </div>
				  </div>
				  
				  
				  
				</form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--                 <button type="submit" class="btn btn-primary">保存</button>
 -->                <a href="javascript:void(0)" onclick="editSyncTemplateSql()" class="btn btn-primary">保存</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

      
 </div>       

<script type="text/javascript" src="${basePath}/js/sync/sync_edit.js"></script>
<script type="text/javascript">

$("#templateId").val("${templateId}");

$("#testSourceId").val("${testSourceId}");
$("#testFieldOne").val("${testFieldOne}");
$("#testFieldTwo").val("${testFieldTwo}");
$("#testFieldThree").val("${testFieldThree}");

function editSyncTemplateSql(){
	if(typeof(editor) != "undefined"){
	    $("#sqlContent").val(editor.getValue());
	}
	var $form = $('#template_sql_form');
	var description = $.trim($form.find('input[name="description"]').val());
	if (!description) {
		alert('SQL描述不能为空');
		$form.find('input[name="description"]').focus();
		return;
	}
	var dataSourceId = $.trim($form.find('select[name="dataSourceId"]').val());
	if (!dataSourceId) {
		alert('数据源不能为空');
		return;
	}
	var sqlType = $form.find('input[name="sqlType"]').val();
	if (sqlType == 'TARGET') {
		var sourceSqlId = $.trim($form.find('select[name="sourceSqlId"]').val());
		if (!sourceSqlId) {
			alert('源SQL不能为空');
			return;
		}
	}
	var sqlContent = $.trim($form.find('textarea[name="sqlContent"]').val());
	if (!sqlContent) {
		alert('脚本内容不能为空');
		return;
	}
	
	 $("#template_sql_form").ajaxSubmit({
			type: 'post',
			url:  '${basePath}/sync/saveSyncTemplateSql.do',
			dataType:  'json',
			success: function(data) {	
				if(data.success=="true"){
					alert("修改成功!");
					location.href="${basePath}/sync/editSyncTemplate.do?templateId="+data.templateId+"&testSourceId="+$('#testSourceId').val()+"&testFieldOne="+$('#testFieldOne').val()+
							"&testFieldTwo="+$('#testFieldTwo').val()+"&testFieldThree="+$('#testFieldThree').val();
				}else{
					alert("修改失败!");
				}
				    
				}
	    });
	
}


function resort(direction,templateId,templateSqlId){
	$.ajax({
		url:'${basePath}/sync/resortSyncTemplateSql.do',
		type:'POST',
		data:{
			'direction':direction,
			'templateId':templateId,
			'templateSqlId':templateSqlId
		},
		dataType:'json',
		success:function(data) {
			if(data.success=="true"){
				location.href="${basePath}/sync/editSyncTemplate.do?templateId="+data.templateId+"&testSourceId="+$('#testSourceId').val()+"&testFieldOne="+$('#testFieldOne').val()+
						"&testFieldTwo="+$('#testFieldTwo').val()+"&testFieldThree="+$('#testFieldThree').val();
			}else{
				alert("排序失败!");
			}
		},
		error:function() {
			alert('系统异常');
		}
	});
}
</script>
</body>
</html>